Angular Flexbox হল একটি লেআউট মডিউল যা CSS Flexbox বৈশিষ্ট্য ব্যবহার করে Angular অ্যাপ্লিকেশনের ইউজার ইন্টারফেস ডিজাইন এবং লেআউট তৈরি করতে সহায়ক। Flexbox মূলত ডিভাইসের স্ক্রীন সাইজের সাথে সহজে অভিযোজিত এবং রেস্পন্সিভ লেআউট তৈরি করার জন্য ব্যবহৃত হয়। Angular-এ Flexbox ব্যবহারের জন্য আপনি Angular Flex Layout লাইব্রেরি ব্যবহার করতে পারেন, যা Flexbox এর সুবিধাগুলো Angular কম্পোনেন্টে ইনক্লুড করতে সাহায্য করে।

Angular Flex Layout লাইব্রেরি ইন্সটল করা

Angular অ্যাপ্লিকেশনে Angular Flex Layout লাইব্রেরি ব্যবহার করতে হলে প্রথমে এটি ইন্সটল করতে হবে। এটি করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install @angular/flex-layout

এটি ইন্সটল হয়ে গেলে, আপনাকে FlexLayoutModule ইম্পোর্ট করতে হবে আপনার AppModule ফাইলে:

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FlexLayoutModule // Flex Layout মডিউলটি ইম্পোর্ট করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Flexbox ব্যবহারের জন্য Angular টেমপ্লেটে কোড

Angular Flex Layout লাইব্রেরি কিছু ডিরেক্টিভ প্রদান করে, যেমন fxLayout, fxLayoutAlign, fxFlex, যা Flexbox প্রোপার্টিজের উপর ভিত্তি করে কাজ করে। এগুলির মাধ্যমে আপনি সহজেই লেআউট এবং ডিভাইস রেস্পন্সিভ ডিজাইন তৈরি করতে পারবেন।

উদাহরণ: বেসিক Flexbox লেআউট

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex="25%" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="50%" style="background-color: lightgreen;">Column 2</div>
  <div fxFlex="25%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxLayout="row": এটি নির্দেশ করে যে আইটেমগুলোকে row (অর্থাৎ এক লাইনে) আউটপুট করতে হবে।
• fxLayoutGap="10px": এটি বিভিন্ন কলামের মধ্যে ১০ পিক্সেল গ্যাপ অ্যাপ্লাই করে।
• fxFlex="25%" এবং fxFlex="50%": এগুলি কলামগুলোর প্রস্থ নিয়ন্ত্রণ করে, যেখানে প্রথম কলাম ২৫% এবং দ্বিতীয় কলাম ৫০% প্রস্থ নিয়ে কাজ করবে।

রেস্পন্সিভ লেআউট তৈরি করা

Angular Flex Layout রেস্পন্সিভ ডিজাইন তৈরি করতে খুবই কার্যকর। আপনি fxLayout.xs, fxLayout.sm, fxLayout.md ইত্যাদি ডিরেক্টিভ ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে ভিন্ন লেআউট তৈরি করতে পারেন।

উদাহরণ: রেস্পন্সিভ ফ্লেক্সবক্স লেআউট

<div fxLayout="row" fxLayout.xs="column" fxLayout.sm="row" fxLayoutGap="10px">
  <div fxFlex="30%" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="40%" style="background-color: lightgreen;">Column 2</div>
  <div fxFlex="30%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxLayout.xs="column": স্ক্রীন সাইজ যদি extra small (xs) হয়, তাহলে লেআউট কলাম আকারে হবে।
• fxLayout.sm="row": স্ক্রীন সাইজ small (sm) বা তার চেয়ে বড় হলে লেআউট row আকারে হবে।

fxLayoutAlign এবং fxFlexAlign ব্যবহার

Angular Flex Layout এর মধ্যে fxLayoutAlign এবং fxFlexAlign প্রপার্টি ব্যবহার করে আপনি উপাদানগুলোর অবস্থান (alignment) নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: Alignment পরিবর্তন

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
  <div fxFlex="30%" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="40%" style="background-color: lightgreen;">Column 2</div>
  <div fxFlex="30%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxLayoutAlign="center center": এটি উপাদানগুলোর অনুভূমিক এবং উল্লম্ব অবস্থান center করে দিবে।

Angular Flexbox এর অন্যান্য বৈশিষ্ট্য

• fxShow: কোনো উপাদান দেখানোর জন্য ব্যবহার করা হয়। এটি স্ক্রীন সাইজের উপর ভিত্তি করে উপাদানটি দৃশ্যমান বা অদৃশ্য করে দিতে পারে।
• fxHide: কোনো উপাদান লুকানোর জন্য ব্যবহৃত হয়।

উদাহরণ: fxShow এবং fxHide ব্যবহার

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex="30%" fxShow="true" style="background-color: lightblue;">Column 1</div>
  <div fxFlex="40%" fxHide="true" style="background-color: lightgreen;">Column 2 (Hidden)</div>
  <div fxFlex="30%" style="background-color: lightcoral;">Column 3</div>
</div>

এখানে:

• fxShow="true": প্রথম কলামটি দৃশ্যমান থাকবে।
• fxHide="true": দ্বিতীয় কলামটি লুকানো থাকবে।

Angular Flex Layout এর মাধ্যমে Flexbox ব্যবহার করা সহজ এবং কার্যকরী। এটি ডিভাইসের স্ক্রীন সাইজের সাথে সহজে অভিযোজিত লেআউট তৈরি করতে সহায়ক, এবং responsive ওয়েব ডিজাইন নিশ্চিত করতে সাহায্য করে।